<template>
  <div class="map-level">
    <div class="header">
      <div class="header-left">
        <div class="date-info">
          <span>{{ state.weekDay }}</span>
          <span>{{ state.dateStr }}</span>
          <span>{{ state.timeStr }}</span>
        </div>
      </div>
      <div class="header-center">
        <div class="title-container">
          <div class="title">智慧文旅应用监测大屏</div>
        </div>
      </div>
      <div class="header-right">
        <div class="weather-info">
          <span>今日气温: {{ state.temperature }}℃</span>
          <span>{{ state.weather }}</span>
          <span class="weather-icon"></span>
        </div>
      </div>
    </div>
    
    <div class="left-column">
      <!-- 添加旅游人数接待情况图表 -->
      <div class="sales-chart-container">
        <div class="chart-title">旅游人数接待情况</div>
        <div id="salesChart" class="sales-chart"></div>
      </div>
      
      <!-- 添加景区质量情况图表 -->
      <div class="sales-distribution-container">
        <div class="chart-title">景区质量情况</div>
        <div id="qualityPieChart" class="quality-pie-chart"></div>
      </div>
      
      <!-- 添加热门景区表格 -->
      <div class="inventory-container">
        <div class="inventory-header">热门景区</div>
        <div class="inventory-table">
          <table>
            <thead>
              <tr>
                <th>景区名称</th>
                <th>县区</th>
                <th>等级</th>
              </tr>
            </thead>
          </table>
          <div class="scrolling-container">
            <table class="scrolling-table">
              <tbody>
                <tr v-for="(spot, index) in hotScenicSpots" :key="index" class="scenic-row">
                  <td>{{ spot.name }}</td>
                  <td>{{ spot.area }}</td>
                  <td :class="spot.levelClass">{{ spot.level }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="inventory-border top-left"></div>
        <div class="inventory-border top-right"></div>
        <div class="inventory-border bottom-left"></div>
        <div class="inventory-border bottom-right"></div>
      </div>
    </div>
    
    <!-- 添加文旅发展水平雷达图 -->
    <div class="hot-scenic-container">
      <div class="chart-title">西宁市文旅发展水平</div>
      <div id="tourismRevenueChart" class="hot-scenic-chart"></div>
    </div>

    <!-- 添加推荐路线模块 -->
    <div class="recommended-routes-container" v-if="state.currentRoute">
      <div class="routes-header">推荐路线</div>
      <div class="routes-content">
        <div class="route-title">{{ state.currentRoute.title }}</div>
        <div class="route-subtitle">{{ state.currentRoute.subtitle }}</div>
        <div class="route-plan">
          <div v-for="day in state.currentRoute.days" :key="day.day" class="day-plan">
            <strong v-html="`${day.day}：${day.title}`"></strong>
            <p v-html="day.plan"></p>
          </div>
        </div>
      </div>
      <div class="route-pagination">
        <span
          v-for="(route, index) in recommendedRoutes"
          :key="index"
          class="dot"
          :class="{ 'active': state.currentRouteIndex === index }"
          @click="switchToRoute(index)"
        ></span>
      </div>
      <div class="routes-border top-left"></div>
      <div class="routes-border top-right"></div>
      <div class="routes-border bottom-left"></div>
      <div class="routes-border bottom-right"></div>
    </div>

    <canvas id="canvas"></canvas>
    <div class="return-btn" @click="goBack">返回上一级</div>
    <!-- <div class="map-btn-group">
      <div class="btn" :class="{ active: state.bar }" @click="setEffectToggle('bar')">柱状图</div>
      <div class="btn" :class="{ active: state.flyLine }" @click="setEffectToggle('flyLine')">飞线</div>
      <div class="btn" :class="{ active: state.scatter }" @click="setEffectToggle('scatter')">散点图</div>
      <div class="btn" :class="{ active: state.card }" @click="setEffectToggle('card')">标牌</div>
      <div class="btn" :class="{ active: state.particle }" @click="setEffectToggle('particle')">粒子特效</div>
      <div class="btn" :class="{ active: state.path }" @click="setEffectToggle('path')">路径轨迹</div>
      <div class="btn" :class="{ active: state.mirror }" @click="setEffectToggle('mirror')">倒影</div>
    </div> -->
  </div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount, reactive, computed, nextTick } from "vue"
import { World } from "./map"
import * as echarts from 'echarts'
import axios from 'axios'
import { getTouristStatistics, getHotScenicSpots, getTouristAttractionsType } from '../../api'
let app = null
let salesChartInstance = null
let tourismRevenueChartInstance = null
let qualityPieChartInstance = null
let routeInterval = null
let scenicSpotInterval = null
let resizeHandler = null
let scrollInterval = null
let weatherInterval = null

const state = reactive({
  bar: false, // 柱状图
  flyLine: false, // 飞线
  scatter: false, // 散点图
  card: false, // 标牌
  particle: false, // 粒子
  mirror: false, // 倒影
  path: false, // 路径轨迹
  
  // 头部数据
  weekDay: '',
  dateStr: '',
  timeStr: '',
  updateTime: '',
  temperature: '--',
  weather: '--',
  currentRoute: null,
  currentRouteIndex: 0,
  currentScenicSpotPage: 0,
  
  // 响应式状态
  screenWidth: window.innerWidth,
  screenHeight: window.innerHeight,
  isMobile: window.innerWidth < 768,
  isTablet: window.innerWidth >= 768 && window.innerWidth < 1200,
  isDesktop: window.innerWidth >= 1200,
})

// 响应式布局调整函数
const updateScreenInfo = () => {
  state.screenWidth = window.innerWidth
  state.screenHeight = window.innerHeight
  state.isMobile = window.innerWidth < 768
  state.isTablet = window.innerWidth >= 768 && window.innerWidth < 1200
  state.isDesktop = window.innerWidth >= 1200
  
  // 根据屏幕尺寸调整图表配置
  updateChartsForScreen()
}

// 根据屏幕尺寸调整图表配置
const updateChartsForScreen = () => {
  const isMobile = state.screenWidth < 768
  const isSmallScreen = state.screenWidth < 1366
  
  // 调整图表字体大小和间距
  const fontSize = isMobile ? 10 : isSmallScreen ? 12 : 14
  const titleFontSize = isMobile ? 12 : isSmallScreen ? 14 : 16
  
  // 重新设置图表选项
  if (salesChartInstance) {
    const option = salesChartInstance.getOption()
    if (option && option.textStyle) {
      option.textStyle.fontSize = fontSize
      option.title = option.title || {}
      option.title.textStyle = { fontSize: titleFontSize }
      salesChartInstance.setOption(option)
    }
  }
  
  if (tourismRevenueChartInstance) {
    const option = tourismRevenueChartInstance.getOption()
    if (option && option.textStyle) {
      option.textStyle.fontSize = fontSize
      tourismRevenueChartInstance.setOption(option)
    }
  }
  
  if (qualityPieChartInstance) {
    const option = qualityPieChartInstance.getOption()
    if (option && option.textStyle) {
      option.textStyle.fontSize = fontSize
      qualityPieChartInstance.setOption(option)
    }
  }
}

const hotScenicSpots = ref([]);


const recommendedRoutes = [
  {
    title: '历史文化线',
    subtitle: '四天三晚（深度沉浸版）',
    days: [
      { day: 'Day1', title: '市区文化核心', plan: '上午：青海省博物馆（全面了解青海历史）<br>下午：东关清真大寺<br>晚上：莫家街（夜景）' },
      { day: 'Day2', title: '藏传佛教+自然风光', plan: '全天：塔尔寺（深度游览，可体验唐卡绘画）<br>傍晚：香格里拉特色文化街区（藏式餐厅+文创）' },
      { day: 'Day3', title: '历史遗迹+生态', plan: '上午：西宁野生动物园（高原动物观赏）<br>下午：北禅寺（悬空寺）+沈那遗址（卡约文化）<br>晚上：唐道637（现代文旅综合体，夜景美）' },
      { day: 'Day4', title: '边关文化+返程', plan: '上午：日月山（文成公主传说，自然+历史）<br>下午：返程前逛麒麟名都特色文化街区（伴手礼采购）' }
    ]
  },
  {
    title: '名俗风情线',
    subtitle: '四天三晚（全景深度版）',
    days: [
      { day: 'Day1', title: '市区回族文化', plan: '上午：南关清真寺+南关街<br>下午：莫家沟莫名湖文化艺术区（回族艺术展）<br>晚上：大新街夜市' },
      { day: 'Day2', title: '藏族文化+自然', plan: '全天：塔尔寺+陈家滩文化旅游产业园（河湟文化体验）<br>晚上：香格里拉特色文化街区（藏餐）' },
      { day: 'Day3', title: '高原生态+边关文化', plan: '上午：西宁野生动物园<br>下午：日月山（自然+历史）<br>晚上：唐道637（现代藏族风情商业街）' },
      { day: 'Day4', title: '民俗购物+返程', plan: '上午：水井巷・巷中井（小吃+购物）<br>下午：豹街（休闲+晚餐）→ 返程' }
    ]
  },
  {
    title: '生态观光线',
    subtitle: '三天两晚（自然精华版）',
    days: [
      { day: 'Day1', title: '市区公园+湿地', plan: '上午：南山公园（俯瞰西宁全景）<br>下午：北川河湿地公园（生态漫步）<br>晚上：麒麟湾公园（夜景）' },
      { day: 'Day2', title: '野生动物+森林', plan: '上午：西宁野生动物园<br>下午：鹞子沟风景区（大通县，森林徒步）<br>晚上：水井巷・巷中井（小吃）' },
      { day: 'Day3', title: '高原风光', plan: '全天：日月山（草原+文成公主传说）<br>返程前：麒麟名都特色文化街区（购物）' }
    ]
  },
  {
    title: '休闲美食线',
    subtitle: '四天三晚（深度美食版）',
    days: [
      { day: 'Day1', title: '经典美食街', plan: '上午：南关街<br>下午：饮马街街道<br>晚上：水井巷・巷中井' },
      { day: 'Day2', title: '文化+美食', plan: '上午：马佳肴文化产业园（回族宴席体验）<br>下午：麒麟名都特色文化街区<br>晚上：大新街夜市' },
      { day: 'Day3', title: '温泉+自然', plan: '上午：夏都博汇温泉水乐园<br>下午：西宁野生动物园<br>晚上：唐道637' },
      { day: 'Day4', title: '早市+返程', plan: '上午：五一路早市（本地早餐）<br>下午：返程' }
    ]
  }
];

const cycleRoute = () => {
  state.currentRouteIndex = (state.currentRouteIndex + 1) % recommendedRoutes.length;
  state.currentRoute = recommendedRoutes[state.currentRouteIndex];
};

const switchToRoute = (index) => {
  if (routeInterval) {
    clearInterval(routeInterval);
  }
  state.currentRouteIndex = index;
  state.currentRoute = recommendedRoutes[state.currentRouteIndex];
  routeInterval = setInterval(cycleRoute, 10000);
}

// 更新时间
const updateDateTime = () => {
  const now = new Date()
  const weeks = ['日', '一', '二', '三', '四', '五', '六']
  
  state.weekDay = `星期${weeks[now.getDay()]}`
  state.dateStr = `${now.getFullYear()}年${now.getMonth() + 1}月${now.getDate()}日`
  state.timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
}

// 设置按钮状态开关
const setEffectToggle = (type) => {
  console.log(app.currentScene)
  if (["bar", "flyLine", "scatter", "card", "path"].includes(type) && app && app.currentScene === "childScene") {
    return false
  }
  // 设置按钮状态
  state[type] = !state[type]

  if (type === "bar") {
    app.barGroup.visible = state[type]
    app.setLabelVisible("labelGroup", state[type])
  }
  if (type === "particle") {
    app.particles.enable = state[type]
    app.particles.instance.visible = state[type]
  }
  if (type === "flyLine") {
    app.flyLineGroup.visible = state[type]
    app.flyLineFocusGroup.visible = state[type]
  }
  if (type === "scatter") {
    app.scatterGroup.visible = state[type]
  }
  if (type === "card") {
    app.setLabelVisible("badgeGroup", state[type])
  }
  if (type === "mirror") {
    app.groundMirror.visible = state[type]
  }
  if (type === "path") {
    app.pathLineGroup.visible = state[type]
  }
}
// 设置按钮启用和禁用
const setEnable = (bool) => {
  state.bar = bool
  state.flyLine = bool
  state.scatter = bool
  state.card = bool
  state.path = bool
}
// 返回上一级
const goBack = () => {
  app && app.goBack()
}

// 初始化旅游人数接待情况图表
const initSalesChart = async () => {
  const chartDom = document.getElementById('salesChart')
  salesChartInstance = echarts.init(chartDom)
  
  const res = await getTouristStatistics()
  const chartData = res.data
  
  const months = chartData[0].data.map(item => `${item.month}月`)
  
  const colors = ['#007bff', '#28a745', '#ffc107'];
  const series = chartData.map((yearData, index) => ({
    name: `${yearData.year}年`,
    type: 'line',
    smooth: false,
    symbol: 'circle',
    symbolSize: 6,
    data: yearData.data.map(d => d.visitors),
    itemStyle: {
      color: colors[index]
    },
    lineStyle: {
      width: 2,
      color: colors[index]
    }
  }))
  
  const option = {
    backgroundColor: 'transparent',
    grid: {
      top: 40,
      left: 50,
      right: 20,
      bottom: 30,
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 14, 36, 0.8)',
      borderColor: '#2bc4dc',
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      },
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: function(params) {
        let result = params[0].name + '<br/>'
        params.forEach(param => {
          result += param.marker + param.seriesName + ': ' + param.value + '万人次<br/>'
        })
        return result
      }
    },
    legend: {
      data: series.map(item => item.name),
      textStyle: {
        color: '#fff'
      },
      top: 5,
      right: 10,
      itemWidth: 10,
      itemHeight: 10,
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: months,
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    yAxis: {
      type: 'value',
      name: '人数(万人次)',
      nameTextStyle: {
        color: '#fff',
        align: 'left'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.5)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLabel: {
        color: '#fff'
      }
    },
    series: series
  }
  
  salesChartInstance.setOption(option)
}

// 初始化景区质量情况图表
const initQualityPieChart = async () => {
  const chartDom = document.getElementById('qualityPieChart')
  qualityPieChartInstance = echarts.init(chartDom)
  
  try {
    console.log('正在调用景区质量情况接口...');
    const res = await getTouristAttractionsType()
    console.log('景区质量情况接口返回数据:', JSON.stringify(res, null, 2));
    
    let chartData = []
    
    if (res && res.data && res.data.data) {
      const data = res.data.data;
      console.log('找到景区质量数据:', data);
      
      // 根据接口返回的数据格式转换为图表需要的格式
      chartData = [
        { value: data.fiveLevel || 0, name: '5A级' },
        { value: data.fourLevel || 0, name: '4A级' },
        { value: data.threeLevel || 0, name: '3A级' }
      ];
      
      // 过滤掉数量为0的项目
      chartData = chartData.filter(item => item.value > 0);
      
      console.log('转换后的图表数据:', chartData);
    } else {
      console.log('接口返回数据格式异常，使用默认数据');
      // 使用默认数据
      chartData = [
        { value: 15, name: '5A级' },
        { value: 35, name: '4A级' },
        { value: 50, name: '3A级' }
      ];
    }
    
    const option = {
      backgroundColor: 'transparent',
      color: ['#5470c6', '#91cc75', '#fac858', '#fc8452', '#9a60b4'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}个',
        backgroundColor: 'rgba(0, 14, 36, 0.8)',
        borderColor: '#2bc4dc',
        borderWidth: 1,
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        top: '5%',
        left: 'center',
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          name: '景区质量',
          type: 'pie',
          radius: '70%',
          center: ['50%', '65%'],
          avoidLabelOverlap: true,
          label: {
            show: true,
            formatter: '{b}',
            color: '#fff'
          },
          labelLine: {
            show: true
          },
          data: chartData
        }
      ]
    }
    qualityPieChartInstance.setOption(option)
    
  } catch (error) {
    console.error('获取景区质量情况数据失败:', error);
    
    // 出错时使用默认数据
    const option = {
      backgroundColor: 'transparent',
      color: ['#5470c6', '#91cc75', '#fac858'],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c}个',
        backgroundColor: 'rgba(0, 14, 36, 0.8)',
        borderColor: '#2bc4dc',
        borderWidth: 1,
        textStyle: {
          color: '#fff'
        }
      },
      legend: {
        top: '5%',
        left: 'center',
        textStyle: {
          color: '#fff'
        }
      },
      series: [
        {
          name: '景区质量',
          type: 'pie',
          radius: '70%',
          center: ['50%', '65%'],
          avoidLabelOverlap: true,
          label: {
            show: true,
            formatter: '{b}',
            color: '#fff'
          },
          labelLine: {
            show: true
          },
          data: [
            { value: 1, name: '5A级' },
            { value: 18, name: '4A级' },
            { value: 24, name: '3A级' }
          ]
        }
      ]
    }
    qualityPieChartInstance.setOption(option)
  }
}

// 获取热门景区数据
const fetchHotScenicSpots = async () => {
  try {
    console.log('正在调用热门景区接口...');
    const res = await getHotScenicSpots({
      pageNo: 1,
      pageSize: 100
    });
    
    console.log('接口返回完整数据:', JSON.stringify(res, null, 2));
    
    if (res && res.data && res.data.data && res.data.data.list && Array.isArray(res.data.data.list)) {
      console.log('找到数据列表，长度:', res.data.data.list.length);
      console.log('第一条数据示例:', res.data.data.list[0]);
      
      hotScenicSpots.value = res.data.data.list.map(item => {
        const mappedItem = {
          name: item.scenicAreaName || '未知景区',
          area: item.county || '未知县区', 
          city: item.address || '未知地址',
          level: getQualityGradeText(item.qualityGrade),
          levelClass: getLevelClass(getQualityGradeText(item.qualityGrade))
        };
        console.log('映射后的数据:', mappedItem);
        return mappedItem;
      });
      
      console.log('热门景区数据加载成功，共', hotScenicSpots.value.length, '条记录');
      console.log('最终数据:', hotScenicSpots.value);
      
      // 数据加载完成后，延迟启动滚动，给Vue更多时间渲染DOM
      setTimeout(() => {
        startAutoScrollForTable();
      }, 3000);
      
    } else {
      console.log('接口返回数据格式异常，使用测试数据');
      console.log('res:', res);
      console.log('res.data:', res?.data);
      console.log('res.data.data:', res?.data?.data);
      console.log('res.data.data.list:', res?.data?.data?.list);
      
      // 使用测试数据确保有内容可以滚动
      hotScenicSpots.value = [
        { name: '塔尔寺旅游区', area: '湟中区', level: '5A级', levelClass: 'level-5a' },
        { name: '西宁市青海藏文化馆', area: '湟中区', level: '4A级', levelClass: 'level-4a' },
        { name: '西宁市力盟步行街文化旅游区', area: '城西区', level: '4A级', levelClass: 'level-4a' },
        { name: '西宁市青藏高原野生动物园', area: '城西区', level: '4A级', levelClass: 'level-4a' },
        { name: '西宁市人民公园', area: '城中区', level: '3A级', levelClass: 'level-3a' },
        { name: '西宁市南山公园', area: '城中区', level: '3A级', levelClass: 'level-3a' },
        { name: '西宁市北山公园', area: '城北区', level: '3A级', levelClass: 'level-3a' },
        { name: '西宁市麒麟湾公园', area: '城东区', level: '3A级', levelClass: 'level-3a' },
        { name: '西宁市湟水森林公园', area: '城东区', level: '3A级', levelClass: 'level-3a' },
        { name: '西宁市植物园', area: '城西区', level: '3A级', levelClass: 'level-3a' }
      ];
      
      // 数据加载完成后，延迟启动滚动，给Vue更多时间渲染DOM
      setTimeout(() => {
        startAutoScrollForTable();
      }, 3000);
    }
  } catch (error) {
    console.error('获取热门景区数据失败，使用测试数据:', error);
    
    // 使用测试数据
    hotScenicSpots.value = [
      { name: '塔尔寺旅游区', area: '湟中区', level: '5A级', levelClass: 'level-5a' },
      { name: '西宁市青海藏文化馆', area: '湟中区', level: '4A级', levelClass: 'level-4a' },
      { name: '西宁市力盟步行街文化旅游区', area: '城西区', level: '4A级', levelClass: 'level-4a' },
      { name: '西宁市青藏高原野生动物园', area: '城西区', level: '4A级', levelClass: 'level-4a' },
      { name: '西宁市人民公园', area: '城中区', level: '3A级', levelClass: 'level-3a' },
      { name: '西宁市南山公园', area: '城中区', level: '3A级', levelClass: 'level-3a' },
      { name: '西宁市北山公园', area: '城北区', level: '3A级', levelClass: 'level-3a' },
      { name: '西宁市麒麟湾公园', area: '城东区', level: '3A级', levelClass: 'level-3a' },
      { name: '西宁市湟水森林公园', area: '城东区', level: '3A级', levelClass: 'level-3a' },
      { name: '西宁市植物园', area: '城西区', level: '3A级', levelClass: 'level-3a' }
    ];
    
    // 数据加载完成后，延迟启动滚动，给Vue更多时间渲染DOM
    setTimeout(() => {
      startAutoScrollForTable();
    }, 3000);
  }
};

// 专门为表格启动自动滚动的函数
const startAutoScrollForTable = () => {
  const scrollContainer = document.querySelector('.scrolling-container');
  console.log('表格滚动容器:', scrollContainer);
  
  if (scrollContainer) {
    console.log('开始表格自动滚动');
    console.log('容器高度:', scrollContainer.clientHeight);
    console.log('内容高度:', scrollContainer.scrollHeight);
    console.log('是否可滚动:', scrollContainer.scrollHeight > scrollContainer.clientHeight);
    
    // 清除之前的滚动定时器
    if (scrollInterval) {
      clearInterval(scrollInterval);
    }
    
    // 检查是否有足够内容可以滚动
    if (scrollContainer.scrollHeight > scrollContainer.clientHeight) {
      scrollInterval = setInterval(() => {
        scrollContainer.scrollTop += 1;
        // 如果滚动到底部，重新开始
        if (scrollContainer.scrollTop >= scrollContainer.scrollHeight - scrollContainer.clientHeight) {
          scrollContainer.scrollTop = 0;
        }
      }, 50); // 每50毫秒滚动1像素
      console.log('滚动定时器已启动');
    } else {
      console.log('内容不足，无需滚动');
    }
  } else {
    console.log('未找到表格滚动容器，2秒后重试');
    setTimeout(startAutoScrollForTable, 2000);
  }
};

// 使用默认数据的函数
const useDefaultData = () => {
  hotScenicSpots.value = [];
};

// 强制启动滚动（调试用）
const forceStartScroll = () => {
  console.log('强制启动滚动');
  const scrollContainer = document.querySelector('.scrolling-container');
  if (scrollContainer) {
    console.log('找到滚动容器，强制启动');
    if (scrollInterval) {
      clearInterval(scrollInterval);
    }
    scrollInterval = setInterval(() => {
      scrollContainer.scrollTop += 1;
      if (scrollContainer.scrollTop >= scrollContainer.scrollHeight - scrollContainer.clientHeight) {
        scrollContainer.scrollTop = 0;
      }
    }, 50);
  }
};

// 将函数暴露到全局，方便调试
window.forceStartScroll = forceStartScroll;

// 将数字等级转换为文字等级
const getQualityGradeText = (grade) => {
  switch (grade) {
    case 1:
      return '5A级';
    case 2:
      return '4A级';
    case 3:
      return '3A级';
    case 4:
      return '2A级';
    case 5:
      return '1A级';
    default:
      return '未评级';
  }
};

// 获取等级样式类名
const getLevelClass = (level) => {
  if (!level) return 'level-unknown';
  if (level.includes('5A')) return 'level-5a';
  if (level.includes('4A')) return 'level-4a';
  if (level.includes('3A')) return 'level-3a';
  if (level.includes('2A')) return 'level-2a';
  if (level.includes('1A')) return 'level-1a';
  return 'level-unknown';
};

// 初始化文旅发展水平雷达图
const initTourismRevenueChart = () => {
  const chartDom = document.getElementById('tourismRevenueChart')
  tourismRevenueChartInstance = echarts.init(chartDom)
  
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 14, 36, 0.8)',
      borderColor: '#2bc4dc',
      borderWidth: 1,
      textStyle: {
        color: '#fff'
      }
    },
    legend: {
      data: ['2022年', '2023年', '2024年'],
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      right: 15,
      top: 'middle',
      orient: 'vertical',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 15
    },
    radar: {
      indicator: [
        { name: '景区资源', max: 100 },
        { name: '交通便利', max: 100 },
        { name: '接待能力', max: 100 },
        { name: '文化特色', max: 100 },
        { name: '品牌影响', max: 100 },
        { name: '数字化水平', max: 100 }
      ],
      center: ['40%', '50%'],
      radius: '65%',
      axisName: {
        color: '#fff',
        fontSize: 12
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      splitArea: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      }
    },
    series: [
      {
        name: '文旅发展水平',
        type: 'radar',
        data: [
          {
            value: [65, 60, 55, 80, 45, 32],
            name: '2022年',
            itemStyle: {
              color: '#91cc75'
            },
            lineStyle: {
              color: '#91cc75',
              width: 2
            },
            areaStyle: {
              color: 'rgba(145, 204, 117, 0.15)'
            }
          },
          {
            value: [72, 68, 65, 85, 58, 45],
            name: '2023年',
            itemStyle: {
              color: '#00f2f1'
            },
            lineStyle: {
              color: '#00f2f1',
              width: 2
            },
            areaStyle: {
              color: 'rgba(0, 242, 241, 0.15)'
            }
          },
          {
            value: [78, 75, 72, 88, 68, 62],
            name: '2024年',
            itemStyle: {
              color: '#5470c6'
            },
            lineStyle: {
              color: '#5470c6',
              width: 2
            },
            areaStyle: {
              color: 'rgba(84, 112, 198, 0.15)'
            }
          }
        ]
      }
    ]
  }
  
  tourismRevenueChartInstance.setOption(option)
}

// 根据WMO代码获取天气描述
const getWeatherDescription = (code) => {
  const weatherMap = {
    0: '晴',
    1: '基本晴朗',
    2: '局部多云',
    3: '阴天',
    45: '雾',
    48: '霜雾',
    51: '小毛毛雨',
    53: '中等毛毛雨',
    55: '大毛毛雨',
    61: '小雨',
    63: '中雨',
    65: '大雨',
    80: '小阵雨',
    81: '中阵雨',
    82: '大阵雨',
    95: '雷暴',
  };
  return weatherMap[code] || '未知';
}

// 获取实时天气 (使用 Open-Meteo)
const getRealtimeWeather = async () => {
  try {
    // 西宁的经纬度
    const latitude = 36.62;
    const longitude = 101.78;
    const res = await axios.get(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}&current_weather=true`);
    
    if (res.data && res.data.current_weather) {
      const { temperature, time, weathercode } = res.data.current_weather;
      state.temperature = temperature.toFixed(0);
      state.weather = getWeatherDescription(weathercode);
      
      const updateDate = new Date(time);
      state.updateTime = `${updateDate.getHours().toString().padStart(2, '0')}:${updateDate.getMinutes().toString().padStart(2, '0')}`;
    }
  } catch (error) {
    console.error('获取实时天气失败:', error);
  }
}

onMounted(() => {
  app = new World(document.getElementById("canvas"), {
    geoProjectionCenter: [108.55, 34.32],
    setEnable: setEnable,
    initialState: state,
  })
  
  // 初始化日期时间
  updateDateTime()
  // 每秒更新时间
  setInterval(updateDateTime, 1000)
  
  // 获取实时天气并设置定时更新
  getRealtimeWeather()
  weatherInterval = setInterval(getRealtimeWeather, 60 * 1000) // 每分钟更新一次
  
  // 获取热门景区数据（数据加载完成后会自动启动滚动）
  fetchHotScenicSpots()
  // 初始化旅游人数接待情况图表
  initSalesChart()
  // 初始化景区质量情况图表
  initQualityPieChart()
  // 初始化文旅收入统计图表
  initTourismRevenueChart()

  // 初始化并启动推荐路线循环
  state.currentRoute = recommendedRoutes[0];
  routeInterval = setInterval(cycleRoute, 10000); // 每10秒切换
  
  // 备用滚动启动（以防数据加载失败）
  setTimeout(() => {
    if (!scrollInterval) {
      console.log('备用滚动启动');
      startAutoScrollForTable();
    }
  }, 5000);

  resizeHandler = () => {
    // 延迟执行resize，确保DOM更新完成
    setTimeout(() => {
      salesChartInstance && salesChartInstance.resize()
      tourismRevenueChartInstance && tourismRevenueChartInstance.resize()
      qualityPieChartInstance && qualityPieChartInstance.resize()
    }, 100)
  }
  
  // 添加防抖处理
  let resizeTimeout = null
  const debouncedResize = () => {
    if (resizeTimeout) {
      clearTimeout(resizeTimeout)
    }
    resizeTimeout = setTimeout(() => {
      updateScreenInfo()
      resizeHandler()
    }, 200)
  }
  
  window.addEventListener('resize', debouncedResize)
  
  // 监听屏幕方向变化
  window.addEventListener('orientationchange', () => {
    setTimeout(() => {
      updateScreenInfo()
      resizeHandler()
    }, 500)
  })
  
  // 初始化屏幕信息
  updateScreenInfo()
})

onBeforeUnmount(() => {
  app && app.destroy()
  // 销毁ECharts实例
  salesChartInstance && salesChartInstance.dispose()
  tourismRevenueChartInstance && tourismRevenueChartInstance.dispose()
  qualityPieChartInstance && qualityPieChartInstance.dispose()
  // 清除定时器
  if (routeInterval) {
    clearInterval(routeInterval)
  }
  if (scrollInterval) {
    clearInterval(scrollInterval)
  }
  if (weatherInterval) {
    clearInterval(weatherInterval)
  }
  // 移除窗口大小变化监听
  if (debouncedResize) {
    window.removeEventListener('resize', debouncedResize)
    window.removeEventListener('orientationchange', resizeHandler)
  }
})
</script>

<style lang="scss">
// 全局重置，确保全屏显示
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100%;
}

.map-level {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  
  // CSS变量定义 - 针对高分辨率优化
  --container-padding: clamp(15px, 1.5vw, 35px);
  --header-height: clamp(60px, 6vh, 100px);
  --chart-height: clamp(200px, 25vh, 320px);
  --chart-min-height: 200px;
  --chart-max-height: 320px;
  --left-width: clamp(300px, 28vw, 420px);
  --right-width: clamp(320px, 30vw, 450px);
  --element-gap: clamp(15px, 2vh, 40px);
  --font-size-title: clamp(24px, 3vw, 42px);
  --font-size-large: clamp(14px, 1.3vw, 20px);
  --font-size-medium: clamp(12px, 1.2vw, 18px);
  --font-size-small: clamp(11px, 1vw, 14px);
  --font-size-tiny: clamp(10px, 0.9vw, 12px);
  
  #canvas {
    width: 100%;
    height: 100%;
    background: #000;
  }
  
  // 确保全屏显示，移除缩放以避免留白
  // 针对2560x1600分辨率优化
  @media screen and (min-width: 2560px) and (max-height: 1600px) {
    :root {
      --container-padding: 35px;
      --element-gap: 15px;
      --left-width: 400px;
      --right-width: 430px;
      --chart-height: 260px;
    }
    
    .left-column {
      gap: 15px;
    }
    
    .recommended-routes-container {
      .routes-content {
        height: calc(100vh - var(--header-height) - var(--chart-height) - var(--element-gap) * 3 - 60px);
        min-height: 350px;
        max-height: 480px;
      }
    }
    
    .header {
      padding: 0 50px;
      
      .header-left, .header-right {
        min-width: 300px;
      }
    }
  }
  
  // 高分辨率屏幕优化 (2560px及以上)
  @media screen and (min-width: 2560px) {
    :root {
      --container-padding: 30px;
      --element-gap: 20px;
      --left-width: 420px;
      --right-width: 450px;
      --chart-height: 280px;
    }
    
    .left-column {
      gap: 20px;
    }
    
    .recommended-routes-container {
      .routes-content {
        height: calc(100vh - var(--header-height) - var(--chart-height) - var(--element-gap) * 3 - 60px);
        min-height: 380px;
        max-height: 500px;
      }
    }
    
    .header {
      padding: 0 40px;
      
      .header-left, .header-right {
        min-width: 320px;
      }
    }
  }
  
  // 超高分辨率屏幕优化 (3440px及以上，如带鱼屏)
  @media screen and (min-width: 3440px) {
    :root {
      --container-padding: 50px;
      --element-gap: 25px;
      --left-width: 480px;
      --right-width: 520px;
      --chart-height: 300px;
    }
    
    .recommended-routes-container {
      .routes-content {
        height: calc(100vh - var(--header-height) - var(--chart-height) - var(--element-gap) * 3 - 60px);
        min-height: 400px;
        max-height: 550px;
      }
    }
  }
  
  // 只在极小屏幕时进行适当调整
  @media screen and (max-width: 1024px) {
    .left-column {
      width: 32vw;
      min-width: 280px;
    }
    
    .hot-scenic-container,
    .recommended-routes-container {
      width: 32vw;
      min-width: 300px;
    }
    
    .header {
      &-left {
        width: 32vw;
        min-width: 280px;
      }
      &-right {
        width: 32vw;
        min-width: 280px;
      }
    }
  }
  
  // 移动端适配
  @media screen and (max-width: 768px) {
    .left-column {
      left: 2vw;
      width: 40vw;
    }
    
    .hot-scenic-container,
    .recommended-routes-container {
      right: 2vw;
      width: 40vw;
    }
  }
}

.left-column {
  position: fixed;
  left: var(--container-padding);
  top: calc(var(--header-height) + 2vh);
  bottom: 2vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--element-gap);
  z-index: 10;
  width: var(--left-width);
  max-width: 400px;
  min-width: 320px;
}

// 销量图表样式
.sales-chart-container {
  position: relative;
  width: 100%;
  height: 30vh;
  min-height: 200px;
  max-height: 280px;
  background: rgba(0, 14, 36, 0.7);
  border: 1px solid rgba(65, 155, 201, 0.8);
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(46, 229, 255, 0.3);
  box-sizing: border-box;
  
  .chart-title {
    font-size: clamp(14px, 1.2vw, 18px);
    color: #fff;
    text-align: left;
    margin-bottom: 5px;
    padding: 0 5px;
    border-left: 2px solid #2bc4dc;
  }
  
  .sales-chart {
    width: 100%;
    height: calc(100% - 30px);
  }
  
  &:before, &:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
  }
  
  &:before {
    top: -1px;
    left: -1px;
    border-top: 2px solid #2bc4dc;
    border-left: 2px solid #2bc4dc;
  }
  
  &:after {
    top: -1px;
    right: -1px;
    border-top: 2px solid #2bc4dc;
    border-right: 2px solid #2bc4dc;
  }
  
  &::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 15px;
    height: 15px;
    border-bottom: 2px solid #2bc4dc;
    border-right: 2px solid #2bc4dc;
  }
  
  &::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 15px;
    height: 15px;
    border-bottom: 2px solid #2bc4dc;
    border-left: 2px solid #2bc4dc;
  }
}

// 头部样式
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 6vh;
  min-height: 60px;
  max-height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--container-padding);
  color: #fff;
  z-index: 10;
  
  &-left, &-right {
    display: flex;
    align-items: center;
    height: 100%;
  }

  &-left {
    width: 28vw;
    max-width: 400px;
    min-width: 320px;
    justify-content: flex-start;
  }
  &-right{
    width: 30vw;
    max-width: 450px;
    min-width: 350px;
    justify-content: flex-end;
  }
  
  &-center {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(46, 229, 255, 0.3);
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    
    .title-container {
      display: flex;
      align-items: center;
      justify-content: center;
      
      .title {
        font-size: clamp(24px, 3vw, 42px);
        font-weight: bold;
        color: #fff;
        text-shadow: 0 0 10px rgba(46, 229, 255, 0.8), 0 0 20px rgba(46, 229, 255, 0.4), 0 0 5px rgba(0, 0, 0, 0.8);
        letter-spacing: clamp(2px, 0.3vw, 6px);
        position: relative;
        padding: 0 20px;
        animation: titleGlow 2s infinite alternate;
        white-space: nowrap;
        
        &:before, &:after {
          content: '';
          position: absolute;
          bottom: -10px;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(to right, transparent, rgba(46, 229, 255, 0.8), transparent);
        }
      }
    }
  }
  
  .date-info, .weather-info {
    position: relative;
    padding: 10px 15px;
    background: rgba(0, 14, 36, 0.7);
    border: 1px solid rgba(65, 155, 201, 0.8);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(46, 229, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    
    span {
      margin: 0 0.5vw;
      font-size: clamp(12px, 1.2vw, 18px);
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
      white-space: nowrap;
    }

    // Four corners
    &::before, &::after, & > :first-child::before, & > :first-child::after {
      content: '';
      position: absolute;
      width: 15px;
      height: 15px;
    }
    
    &::before {
      top: -1px;
      left: -1px;
      border-top: 2px solid #2bc4dc;
      border-left: 2px solid #2bc4dc;
    }
    
    &::after {
      top: -1px;
      right: -1px;
      border-top: 2px solid #2bc4dc;
      border-right: 2px solid #2bc4dc;
    }
    
    & > :first-child::before {
      bottom: -1px;
      left: -1px;
      border-bottom: 2px solid #2bc4dc;
      border-left: 2px solid #2bc4dc;
    }
    
    & > :first-child::after {
      bottom: -1px;
      right: -1px;
      border-bottom: 2px solid #2bc4dc;
      border-right: 2px solid #2bc4dc;
    }
  }
  
  .date-info {
    width: 100%;
    white-space: nowrap;
  }

  .weather-info {
    width: 100%;
  }
  
  .weather-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    background-image: url('data:image/svg+xml;utf8,<svg t="1718599438936" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4231" width="24" height="24"><path d="M512 272a240 240 0 1 0 0 480 240 240 0 0 0 0-480z m0 416c-97.2 0-176-78.8-176-176s78.8-176 176-176 176 78.8 176 176-78.8 176-176 176zM512 144c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32s-32 14.3-32 32v80c0 17.7 14.3 32 32 32zM786.7 237.3c8.2 0 16.4-3.1 22.6-9.4l56.6-56.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-56.6 56.6c-12.5 12.5-12.5 32.8 0 45.3 6.3 6.3 14.5 9.4 22.7 9.4zM896 480h-80c-17.7 0-32 14.3-32 32s14.3 32 32 32h80c17.7 0 32-14.3 32-32s-14.3-32-32-32zM214.7 227.9c6.3 6.3 14.4 9.4 22.6 9.4 8.2 0 16.4-3.1 22.6-9.4 12.5-12.5 12.5-32.8 0-45.3l-56.6-56.6c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l56.7 56.6zM208 512c0-17.7-14.3-32-32-32H96c-17.7 0-32 14.3-32 32s14.3 32 32 32h80c17.7 0 32-14.3 32-32zM233.9 786.7c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l56.6 56.6c6.3 6.2 14.4 9.4 22.6 9.4 8.2 0 16.4-3.1 22.6-9.4 12.5-12.5 12.5-32.8 0-45.3l-56.5-56.6zM512 880c-17.7 0-32 14.3-32 32v80c0 17.7 14.3 32 32 32s32-14.3 32-32v-80c0-17.7-14.3-32-32-32zM832.8 786.7l-56.6 56.6c-12.5 12.5-12.5 32.8 0 45.3 6.3 6.2 14.4 9.4 22.6 9.4 8.2 0 16.4-3.1 22.6-9.4l56.6-56.6c12.5-12.5 12.5-32.8 0-45.3s-32.7-12.5-45.2 0z" fill="#FFFFFF" p-id="4232"></path></svg>');
    background-repeat: no-repeat;
    background-size: contain;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
  }
}

@keyframes titleGlow {
  0% {
    text-shadow: 0 0 10px rgba(46, 229, 255, 0.8), 0 0 20px rgba(46, 229, 255, 0.4), 0 0 5px rgba(0, 0, 0, 0.8);
  }
  100% {
    text-shadow: 0 0 15px rgba(46, 229, 255, 0.9), 0 0 30px rgba(46, 229, 255, 0.5), 0 0 40px rgba(46, 229, 255, 0.3), 0 0 5px rgba(0, 0, 0, 0.8);
  }
}

// 返回按钮
.return-btn {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 5px 24px;
  color: #fff;
  border: 1px solid #2bc4dc;
  background: rgba(0, 14, 36, 0.7);
  border-radius: 4px;
  cursor: pointer;
  font-size: clamp(12px, 1vw, 16px);
  z-index: 10;
  transition: all 0.3s ease;
  white-space: nowrap;
  
  &:hover {
    background: rgba(43, 196, 220, 0.2);
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 0 10px rgba(46, 229, 255, 0.5);
  }
}
// 右侧按钮组
.map-btn-group {
  position: absolute;
  right: 500px;
  top: 50%;
  transform: translateY(-50%);
  .btn {
    padding: 5px 12px;
    color: #fff;
    border: 1px solid #2bc4dc;
    margin-bottom: 10px;
    font-size: 12px;
    text-align: center;
    opacity: 0.5;
    cursor: pointer;
    transition: all 0.3s;
    &.active {
      opacity: 1;
    }
  }
}
// 信息框
.info-point {
  background: rgba(0, 0, 0, 0.5);
  color: #a3dcde;
  font-size: 14px;
  width: 170px;
  height: 106px;
  padding: 16px 12px 0;
  margin-bottom: 30px;
  &-wrap {
    &:after,
    &:before {
      display: block;
      content: "";
      position: absolute;
      top: 0;
      width: 15px;
      height: 15px;
      border-top: 1px solid #4b87a6;
    }
    &:before {
      left: 0;
      border-left: 1px solid #4b87a6;
    }
    &:after {
      right: 0;
      border-right: 1px solid #4b87a6;
    }
    &-inner {
      &:after,
      &:before {
        display: block;
        content: "";
        position: absolute;
        bottom: 0;
        width: 15px;
        height: 15px;
        border-bottom: 1px solid #4b87a6;
      }
      &:before {
        left: 0;
        border-left: 1px solid #4b87a6;
      }
      &:after {
        right: 0;
        border-right: 1px solid #4b87a6;
      }
    }
  }
  &-line {
    position: absolute;
    top: 7px;
    right: 12px;
    display: flex;
    .line {
      width: 5px;
      height: 2px;
      margin-right: 5px;
      background: #17e5c3;
    }
  }
  &-content {
    .content-item {
      display: flex;
      height: 28px;
      line-height: 28px;
      background: rgba(35, 47, 58, 0.6);
      margin-bottom: 5px;
      .label {
        width: 60px;
        padding-left: 10px;
      }
      .value {
        color: #fff;
      }
    }
  }
}
// 标牌
.badges-label {
  z-index: 99999;
  &-outline {
    position: absolute;
  }
  &-wrap {
    position: relative;
    padding: 10px 10px;
    background: #0e1937;
    border: 1px solid #1e7491;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    // margin-bottom: 50px;
    bottom: 50px;
    z-index: 99999;
    span {
      color: #ffe70b;
    }
    &:after {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 10px;
      height: 10px;
      display: block;
      content: "";
      border-right: 2px solid #6cfffe;
      border-bottom: 2px solid #6cfffe;
    }
    &:before {
      position: absolute;
      left: 0;
      top: 0;
      width: 10px;
      height: 10px;
      display: block;
      content: "";
      border-left: 2px solid #6cfffe;
      border-top: 2px solid #6cfffe;
    }
    .icon {
      position: absolute;
      width: 27px;
      height: 20px;
      left: 50%;
      transform: translateX(-13px);
      bottom: -40px;
    }
  }
}

.area-name-label {
  &-wrap {
    color: #5fc6dc;
    opacity: 1;
    text-shadow: 1px 1px 0px #000;
  }
}
.provinces-name-label {
  &-wrap {
    color: #5fc6dc;
    opacity: 0;
    text-shadow: 1px 1px 0px #000;
  }
}
.provinces-label-style02 {
  z-index: 2;
  &-wrap {
    transform: translate(0%, 200%);
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 40px;
    z-index: 2;
  }
  .number {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
    /* .unit {
      color: #fff;
      font-size: 12px;
      font-weight: 400;
      opacity: 0.5;
      padding-left: 5px;
    } */
  }

  .no {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #7efbf6;
    /* text-shadow: 0px 0px 4px 0px #7efbf6; */
    text-shadow: 0 0 5px #7efbf6;
    font-size: 16px;
    /* font-weight: 700; */
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
  }
  .yellow {
    .no {
      color: #fef99e !important;
      text-shadow: 0 0 5px #fef99e !important;
    }
  }
}

.fixed-loading {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
}
.page-loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
}
.page-loading {
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-top-color: transparent;
  border-radius: 100%;
  animation: loading infinite 0.75s linear;
}

@keyframes loading {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

// 销量分布图表样式
.sales-distribution-container {
  position: relative;
  width: 380px;
  height: 250px;
  background: rgba(0, 14, 36, 0.7);
  border: 1px solid rgba(65, 155, 201, 0.8);
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(46, 229, 255, 0.3);
  box-sizing: border-box;
  
  .chart-title {
    font-size: 16px;
    color: #fff;
    text-align: left;
    margin-bottom: 5px;
    padding: 0 5px;
    border-left: 2px solid #2bc4dc;
  }
  
  .quality-pie-chart {
    width: 100%;
    height: calc(100% - 30px);
  }
  
  &:before, &:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
  }
  
  &:before {
    top: -1px;
    left: -1px;
    border-top: 2px solid #2bc4dc;
    border-left: 2px solid #2bc4dc;
  }
  
  &:after {
    top: -1px;
    right: -1px;
    border-top: 2px solid #2bc4dc;
    border-right: 2px solid #2bc4dc;
  }
  
  &::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 15px;
    height: 15px;
    border-bottom: 2px solid #2bc4dc;
    border-right: 2px solid #2bc4dc;
  }
  
  &::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 15px;
    height: 15px;
    border-bottom: 2px solid #2bc4dc;
    border-left: 2px solid #2bc4dc;
  }
}

// 销量分布图表样式
.sales-distribution-container {
  position: relative;
  width: 100%;
  height: 30vh;
  min-height: 200px;
  max-height: 280px;
  background: rgba(0, 14, 36, 0.7);
  border: 1px solid rgba(65, 155, 201, 0.8);
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(46, 229, 255, 0.3);
  box-sizing: border-box;
  
  .chart-title {
    font-size: clamp(14px, 1.2vw, 18px);
    color: #fff;
    text-align: left;
    margin-bottom: 5px;
    padding: 0 5px;
    border-left: 2px solid #2bc4dc;
  }
  
  .quality-pie-chart {
    width: 100%;
    height: calc(100% - 30px);
  }
  
  &:before, &:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
  }
  
  &:before {
    top: -1px;
    left: -1px;
    border-top: 2px solid #2bc4dc;
    border-left: 2px solid #2bc4dc;
  }
  
  &:after {
    top: -1px;
    right: -1px;
    border-top: 2px solid #2bc4dc;
    border-right: 2px solid #2bc4dc;
  }
  
  &::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 15px;
    height: 15px;
    border-bottom: 2px solid #2bc4dc;
    border-right: 2px solid #2bc4dc;
  }
  
  &::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 15px;
    height: 15px;
    border-bottom: 2px solid #2bc4dc;
    border-left: 2px solid #2bc4dc;
  }
}

// 热门景区图表样式
.hot-scenic-container {
  position: fixed;
  top: calc(var(--header-height) + var(--element-gap));
  right: var(--container-padding);
  width: var(--right-width);
  max-width: 450px;
  min-width: 350px;
  height: var(--chart-height);
  min-height: 200px;
  max-height: 320px;
  background: rgba(0, 14, 36, 0.7);
  border: 1px solid rgba(65, 155, 201, 0.8);
  border-radius: 4px;
  padding: 10px;
  box-shadow: 0 0 10px rgba(46, 229, 255, 0.3);
  box-sizing: border-box;
  z-index: 10;
  
  .chart-title {
    font-size: clamp(14px, 1.2vw, 18px);
    color: #fff;
    text-align: left;
    margin-bottom: 5px;
    padding: 0 5px;
    border-left: 2px solid #2bc4dc;
  }
  
  .hot-scenic-chart {
    width: 100%;
    height: calc(100% - 30px);
  }
  
  &:before, &:after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
  }
  
  &:before {
    top: -1px;
    left: -1px;
    border-top: 2px solid #2bc4dc;
    border-left: 2px solid #2bc4dc;
  }
  
  &:after {
    top: -1px;
    right: -1px;
    border-top: 2px solid #2bc4dc;
    border-right: 2px solid #2bc4dc;
  }
  
  &::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 15px;
    height: 15px;
    border-bottom: 2px solid #2bc4dc;
    border-right: 2px solid #2bc4dc;
  }
  
  &::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 15px;
    height: 15px;
    border-bottom: 2px solid #2bc4dc;
    border-left: 2px solid #2bc4dc;
  }
}

// 库存监控表格样式
.inventory-container {
  position: relative;
  width: 100%;
  height: 30vh;
  min-height: 200px;
  max-height: 280px;
  background: rgba(0, 10, 30, 0.9);
  border: 1px solid #2bc4dc;
  z-index: 10;
  padding: 0;
  box-shadow: 0 0 20px rgba(46, 229, 255, 0.3);
  
  .inventory-header {
    font-size: clamp(14px, 1.3vw, 20px);
    color: #fff;
    text-align: left;
    margin: 0;
    padding: 8px 15px;
    background: linear-gradient(to right, rgba(43, 196, 220, 0.3), transparent);
    border-bottom: 1px solid #2bc4dc;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .page-controls {
      display: flex;
      gap: 5px;

      .page-btn {
        width: 24px;
        height: 24px;
        border: 1px solid #2bc4dc;
        background: rgba(43, 196, 220, 0.2);
        color: #fff;
        border-radius: 3px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        &:hover:not(:disabled) {
          background: rgba(43, 196, 220, 0.4);
          transform: scale(1.1);
        }

        &:disabled {
          opacity: 0.3;
          cursor: not-allowed;
        }
      }
    }
  }
  
  .inventory-table {
    width: 100%;
    
    table {
      width: 100%;
      border-collapse: collapse;
      table-layout: fixed;
      
      thead {
        tr {
          border-bottom: 1px solid #2bc4dc;
        }
        
        th {
          padding: 10px 8px;
          text-align: left;
          color: #fff;
          font-weight: normal;
          font-size: clamp(12px, 1.1vw, 16px);
          white-space: nowrap;
        }
        
        th:nth-child(1) { width: 60%; }  // 景区名称
        th:nth-child(2) { width: 25%; }  // 县区
        th:nth-child(3) { width: 15%; }  // 等级
        
        th:nth-child(3) {
          text-align: center;
        }
      }
      
      tbody {
        tr {
          border-bottom: 1px solid rgba(43, 196, 220, 0.2);
          
          &:last-child {
            border-bottom: none;
          }
          
          td {
            padding: 15px 8px;
            font-size: 14px;
            color: #fff;
            white-space: nowrap;
            vertical-align: middle;
          }
          



        }
      }
    }

    .scrolling-container {
      height: calc(100% - 80px);
      min-height: 120px;
      max-height: 150px;
      overflow: hidden;
      position: relative;
      
      .scrolling-table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        
        tbody {
          tr {
            border-bottom: 1px solid rgba(43, 196, 220, 0.2);
            transition: all 0.3s ease;
            
            &:last-child {
              border-bottom: none;
            }
            
            &:hover {
              background: rgba(43, 196, 220, 0.1);
              transform: translateX(5px);
            }
            
            td {
              padding: 12px 8px;
              font-size: clamp(11px, 1vw, 14px);
              color: #fff;
              vertical-align: top;
              white-space: normal;
              word-wrap: break-word;
              word-break: break-all;
              overflow-wrap: break-word;
              hyphens: auto;
            }
            
            td:nth-child(1) { 
              width: 60%;
              max-width: 228px;
            }  // 景区名称 - 允许换行
            td:nth-child(2) { 
              width: 25%;
              max-width: 95px;
            }  // 县区
            td:nth-child(3) { 
              width: 15%;
              max-width: 57px;
              text-align: center;
              
              &.level-5a {
                color: #ffc107;
                font-weight: bold;
              }
              
              &.level-4a {
                color: #28a745;
                font-weight: bold;
              }

              &.level-3a {
                color: #007bff;
                font-weight: bold;
              }

              &.level-2a {
                color: #6c757d;
                font-weight: bold;
              }

              &.level-1a {
                color: #dc3545;
                font-weight: bold;
              }

              &.level-unknown {
                color: #aaa;
                font-weight: normal;
              }
            }
          }
        }
      }
      
    }
  }

  
  .inventory-border {
    position: absolute;
    width: 20px;
    height: 20px;
    
    &.top-left {
      top: -1px;
      left: -1px;
      border-top: 2px solid #2bc4dc;
      border-left: 2px solid #2bc4dc;
    }
    
    &.top-right {
      top: -1px;
      right: -1px;
      border-top: 2px solid #2bc4dc;
      border-right: 2px solid #2bc4dc;
    }
    
    &.bottom-right {
      bottom: -1px;
      right: -1px;
      border-bottom: 2px solid #2bc4dc;
      border-right: 2px solid #2bc4dc;
    }
    
    &.bottom-left {
      bottom: -1px;
      left: -1px;
      border-bottom: 2px solid #2bc4dc;
      border-left: 2px solid #2bc4dc;
    }
  }
}

// 推荐路线模块样式
.recommended-routes-container {
  position: fixed;
  top: calc(var(--header-height) + var(--chart-height) + var(--element-gap) * 2);
  right: var(--container-padding);
  width: var(--right-width);
  max-width: 450px;
  min-width: 350px;
  background: rgba(0, 10, 30, 0.9);
  border: 1px solid #2bc4dc;
  z-index: 10;
  padding: 0;
  box-shadow: 0 0 20px rgba(46, 229, 255, 0.3);

  .routes-header {
    font-size: clamp(14px, 1.3vw, 20px);
    color: #fff;
    text-align: left;
    margin: 0;
    padding: 8px 15px;
    background: linear-gradient(to right, rgba(43, 196, 220, 0.3), transparent);
    border-bottom: 1px solid #2bc4dc;
  }

  .routes-content {
    padding: 15px;
    height: calc(100vh - var(--header-height) - var(--chart-height) - var(--element-gap) * 3 - 40px);
    min-height: 380px;
    max-height: 550px;
    overflow-y: hidden;
    color: #fff;
    
    .route-title {
      font-size: clamp(14px, 1.3vw, 20px);
      font-weight: bold;
      color: #7efbf6;
      margin-bottom: 5px;
    }
    
    .route-subtitle {
      font-size: clamp(11px, 1vw, 14px);
      color: #ccc;
      margin-bottom: 15px;
    }

    .route-plan {
      .day-plan {
        margin-bottom: 15px;
        
        strong {
          font-size: clamp(11px, 1vw, 14px);
          color: #2bc4dc;
          display: block;
          margin-bottom: 8px;
        }
        
        p {
          font-size: clamp(10px, 0.9vw, 12px);
          line-height: 1.6;
          margin: 0;
          padding-left: 10px;
          color: #eee;
        }
      }
    }
  }

  .routes-border {
    position: absolute;
    width: 20px;
    height: 20px;
    
    &.top-left {
      top: -1px;
      left: -1px;
      border-top: 2px solid #2bc4dc;
      border-left: 2px solid #2bc4dc;
    }
    
    &.top-right {
      top: -1px;
      right: -1px;
      border-top: 2px solid #2bc4dc;
      border-right: 2px solid #2bc4dc;
    }
    
    &.bottom-right {
      bottom: -1px;
      right: -1px;
      border-bottom: 2px solid #2bc4dc;
      border-right: 2px solid #2bc4dc;
    }
    
    &.bottom-left {
      bottom: -1px;
      left: -1px;
      border-bottom: 2px solid #2bc4dc;
      border-left: 2px solid #2bc4dc;
    }
  }
}

/* 推荐路线滚动条样式 */
.recommended-routes-container .routes-content::-webkit-scrollbar {
  width: 4px;
}
.recommended-routes-container .routes-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}
.recommended-routes-container .routes-content::-webkit-scrollbar-thumb {
  background: #2bc4dc;
  border-radius: 2px;
}
.recommended-routes-container .routes-content::-webkit-scrollbar-thumb:hover {
  background: #38dcec;
}

.route-pagination {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 11;

  .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;

    &.active {
      background-color: #2bc4dc;
      transform: scale(1.2);
    }

    &:hover {
      background-color: rgba(255, 255, 255, 0.7);
    }
  }
}
</style>
